const path = require("path");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // 模式
  mode:'production',
  entry: {
    vue2css: './src/vue2css.js',
    vue3css: './src/vue3css.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.scss$/, // 匹配SCSS文件
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 将CSS文件转换成CommonJS模块
          'postcss-loader', // 可选，添加 autoprefixer 等 PostCSS 插件以实现 CSS 兼容性处理
          'sass-loader' // 将SCSS文件编译成CSS
        ]
      }
    ]
  },
  plugins:[
    new CleanWebpackPlugin(),

    new MiniCssExtractPlugin({
      filename: '[name].css', // 输出到css目录下，文件名与入口文件名相同
      // chunkFilename: '[id].css' // 输出到css目录下，按块id生成文件名
    }),
  ]
};
